<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var sheet_init = {};
		sheet_init.Cfg = {FrozenCol:0,SearchMode:smLazyLoad,Page:30};
		
		//HeaderMode
		sheet_init.HeaderMode = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		sheet_init.Cols = [
		       			{Header:"NO",		Type:"Seq", Align:"Right"},
		       			{Header:"상태",		Type:"Status", Align:"Center"},
		       			{Header:"삭제",		Type:"DelCheck"},
		       			{Header:"문자열",	Type:"Text", KeyField:1, Align:"Center"},
		       			{Header:"콤보",		Type:"Combo", Width:80, ComboText:"대기|진행중|완료", ComboCode:"01|02|03",PopupText:"대기|진행중|완료"},
		       			{Header:"콤보에디트",	Type:"ComboEdit", Width:80, ComboText:"고려대학교|고려대학교2|국민대학교|서울대학교|숙명여자대학교|연세대학교|울산대학교|울산과학기술대학교|이화여자대학교|인천대학교|인천가톨릭대학교"},
		       			{Header:"팝업",		Type:"Popup", Width:100},
		       			{Header:"팝업에디트",	Type:"PopupEdit", Width:100},
		       			{Header:"자동합계",	Type:"AutoSum", Align:"Right",Width:70,Format:"NullInteger"},
		       			{Header:"자동평균",	Type:"AutoAvg", Align:"Right",Width:70, Format:"NullFloat"},
		       			{Header:"정수",		Type:"Int", Align:"Right", Format:"Integer",Width:70, Hidden:1},
		       			{Header:"실수",		Type:"Float", Align:"Right", Format:"Float",Width:70, Hidden:1},
		       			{Header:"날짜",		Type:"Date", Align:"Center", Format:"Ymd", Width:100},
		       			{Header:"패스워드",	Type:"Pass", Hidden:1},
		       			{Header:"체크박스",	Type:"CheckBox"},
		       			{Header:"라디오",	Type:"Radio"}
		       		]; 
		
		IBS_InitSheet(mySheet, sheet_init);
	
		//컬럼의 너비 조정
		mySheet.FitColWidth();
		
		doAction("search");
	});

	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/sheet_data.xml");
				break;
				
			case "init":		//초기화
				mySheet.Reset();
				createSheet();
				break;
		}
	}
	
</script>
<title>모바일 기기용 디자인</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">모바일 기기용 디자인</div>
	<div id="desc">
		PC의 일반 웹브라우저에서 보면 화면을 모바일에서 보려면 화면 크기가 맞지 않는 경우를 종종 볼 수 있다.<br>
		이때는 모바일 웹브라우저에서 화면을 제대로 볼 수 있도록 meta 태그나 각 해상도별로 폰트 크기를 달리하는 방법이 있다.
	</div>
	<div align="right">
		<input type="button" value="초기화" onclick="doAction('init')">
		<input type="button" value="조회" onclick="doAction('search')">
	</div>
	<div id="functionArea">
		<div>PC에서 보던 웹사이즈 화면을 모바일 웹브라우저에 볼때, 기본 화면 크기를 정하려면 meta 태그를 사용해야 한다.<br>
		&lt;head&gt; 태그 아래 meta 태그를 삽입하면 된다.<br>
		&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt;<br>
		<br>
		※ 태그속성</div>
		<div>
		<table style="font-size:10pt;">
			<tr>
				<td width="120">width</td>
				<td>넓이 (device-width : 디바이스 해상도에 맞춰서 보일 수 있도록 설정</td>
			</tr>
			<tr>
				<td>initial-scale</td>
				<td>초기 확대/축소 배율</td>
			</tr>
			<tr>
				<td>minimum-scale</td>
				<td>최소 축소 배율 0 ~10 까지 지정 (기본값 0.25)</td>
			</tr>
			<tr>
				<td>maximum-scale</td>
				<td>최대 확대 배율 0 ~10 까지 지정 (기본값 1.6)</td>
			</tr>
			<tr>
				<td>user-scalable</td>
				<td>확대 축소 여부 (기본값은 yes)</td>
			</tr>
		</table>
		</div>
		<br>
		<div>
		※  CSS 스타일 적용<br>
		아래와 같이 화면의 가로 크기에 따라 폰트 및 라인의 높이등 스타일을 달리해서 화면을 구성할 수 있다.<br>
		<br>
		&lt;style&gt;<br>
        /* width : 0 ~ 980 */<br>
        @media screen and (max-width:1024px) {<br>
        &nbsp;&nbsp;&nbsp;&nbsp;body {<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 0.9em;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 120%<br>
        &nbsp;&nbsp;&nbsp;&nbsp;}<br>
        }<br>
        <br>
        /* width : 981 이상 */<br>
        @media screen and (min-width:981px) {<br>
        &nbsp;&nbsp;&nbsp;&nbsp;body {<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 1.2em;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 150%<br>
        &nbsp;&nbsp;&nbsp;&nbsp;}<br>
        }<br>
    	&lt;/style&gt;
		</div>
	</div>
	<div id="viewArea">
	</div>
</div>
</body>
</html>